import React, { Component } from 'react';
import { Table } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import { Dispatch, bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import './index.less';

import QueryForm from './QueryForm';
import { EMPLOYEE_COLUMNS } from '../../../contants/utils';
import { getEmployee } from '../../../redux/employee';
import { EmployeeRequest, EmployeeResponse } from '../../../interface/employee';

interface Props {
  onGetEmployee: (params: EmployeeRequest) => void;
  employeeList: EmployeeResponse,
}

interface State {
  height: string;
  loading: boolean;
}

class Employee extends Component<Props, State> {
  state: State = {
    height: '300px',
    loading: true,
  }
  componentDidMount() {
    this.setState({
      height: `${document.body.clientHeight - 180}px`
    })
  }
  setEmployee = (params: EmployeeRequest) => {
    this.setState({loading: true}, () => {
      setTimeout(() => { 
        this.setState({
          loading: false
        })
        this.props.onGetEmployee(params);
      }, 1000);
    })
  }
  getTotal = () => {
    let total: number, { employeeList } = this.props;
    total = typeof(employeeList) === "undefined" ? 0 : employeeList.length;
    return (
      <p className="total-p"> 共有 { total } 名员工 </p>
    )
  }
  render() {
    const { loading } = this.state;
    const { employeeList } = this.props;
    console.log( employeeList, this.props )
    return (
      <div style={{height: this.state.height, textAlign: "center"}}>
        <QueryForm onDataChange={this.setEmployee} />
        {
          loading ? (
            <LoadingOutlined className="loading-ico" />
          ) : (
            <div>
              {this.getTotal()}
              <Table dataSource={employeeList} columns={EMPLOYEE_COLUMNS} />
            </div>
          )
        }
      </div>
    )
  }
} 

const mapStateToProps = (state: any) => {
  return {
    employeeList: state.employee.employeeList
  }
}

const mapActionToProps = (dispatch: Dispatch) => bindActionCreators({
  onGetEmployee: getEmployee
}, dispatch)



export default connect(
  mapStateToProps,
  mapActionToProps
  )(Employee);